
<template>
  <div class="view align-center justify-center wow fadeInUp">
     <div style="margin-left:150px;">
        <div class="li1" v-for="(item,index) in list" :key="index">
          <div v-if="item.status===2">
            <div class="node node1">{{item.node}}</div>
            <div class="borderLeft borderLeft1"></div>
          </div>
          <div v-else-if="item.status===0">
            <div class="node node2" >
                {{item.node}}
            </div>
            <div class="borderLeft borderLeft1"></div>
          </div>
          <div v-else class=" "  
  :class="item.ini ? 'inleft ':''">
            <div class="node">{{item.node}}</div>
            <div class="borderLeft"></div>
          </div>
          <div class="view "   
   :class="item.ini ? 'inleftn align-end ':''">
            <div class="name" >{{item.name}}</div>
            <div class="name" >{{item.name1}}</div>
            <div class="name">{{item.name2}}</div>
            <div class="name">{{item.name3}}</div>
          </div>
          
        </div>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          node: "梦境1.0",
          name: "2021年6月份梦境创世",
          name1: '2021年7月',
          name2: '2021年8月xxxxx'
        },
        {
          node: "梦境2.0",
          name: "沉浸互动式NFT创建",
          name1: ' DAO社区展馆开启',
          ini: true
        },
        {
          node: "梦境3.0",
          name: "可编程自定义世开接入"
        },
        {
          node: "梦境4.0",
          name: "梦境元宇宙世界创建 ",
          name1: '1：生态公约上可自定义 ',
          name2: '2：星球主题生态接入 ',
          name3: '3：DAO生态自建公约',
          ini: true
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>

    .li1 {
      list-style: none;
      box-sizing: border-box;
      padding-left: 20px;
      position: relative;
      padding-bottom: 115px;
      line-height: 2;
    }

    .borderLeft {
      width: 2px;
      height: 330px;
      background-color: #fff;
      
      position: absolute;
      top: 20px;
      bottom: 0;
      left: -1px
    }

    .borderLeft1 {
      background-color: #e6e6e6;
    }

    .node::before {
      z-index: 1;
      content: "";
      // background-color: #0091ff;
      background-image: url(../imgs/ccc.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      width: 20px;
      height: 20px;
      color: #fff;
      position: absolute;
      border-radius: 50%;
      left: 0;
      top: 11.225px;
      transform: translate(-50%, -50%);
    }

    .node {
      font-size: 16px;
      line-height: 22.5px;
      font-weight: 500;
      color: #F6E0A5;
      text-align: left;
      margin-bottom:16px;
    }

    .node1 {
      color: #ff3b30;
    }

    .node1::before {
      background-color: #ff3b30;
    }

    .node2 {
      color: #000;
    }

    .node2::before {
      background-color: #e6e6e6;
      width: 10px;
      height: 10px;
    }

    .name {
      color: #FAF8F3;
      text-align: left;
    }

    .time {
      color: #666666;
      font-size: 15px;
    }

    .two {
      display: flex;
      align-items: baseline;
    }

    .advice {
      font-size: 14px;
      color: #999999;
      padding-bottom: 20px;
    }

    .li1:last-child .borderLeft {
      display: none;
    }
    .inleft {
      margin-left: -100px;
    }
    .inleftn {
      align-items: end;
      transform: translateX(-215px);
    }
  </style>